/** @jsx jsx */
import { Axis, Canvas, Chart, jsx, Line, Player, RectGuide, TextGuide } from '@antv/f2';
import * as lil from 'lil-gui';
const context = document.getElementById('container').getContext('2d');
const $wrapper = document.getElementById('mobile-footer');
const data = [
  {
    x: '2003-01-01',
    y: 348.05,
  },
  {
    x: '2003-01-29',
    y: 365.95,
  },
  {
    x: '2003-02-26',
    y: 354.35,
  },
  {
    x: '2003-03-26',
    y: 330.25,
  },
  {
    x: '2003-04-23',
    y: 331.25,
  },
  {
    x: '2003-05-21',
    y: 371.55,
  },
  {
    x: '2003-06-18',
    y: 357.35,
  },
  {
    x: '2003-07-16',
    y: 343.55,
  },
  {
    x: '2003-08-13',
    y: 362.7,
  },
  {
    x: '2003-09-10',
    y: 380.45,
  },
  {
    x: '2003-10-08',
    y: 375.25,
  },
  {
    x: '2003-11-05',
    y: 381.35,
  },
  {
    x: '2003-12-03',
    y: 404.75,
  },
  {
    x: '2003-12-31',
    y: 415.45,
  },
  {
    x: '2004-01-28',
    y: 410.35,
  },
  {
    x: '2004-02-25',
    y: 396.05,
  },
  {
    x: '2004-03-24',
    y: 415.55,
  },
  {
    x: '2004-04-21',
    y: 390.05,
  },
  {
    x: '2004-05-19',
    y: 382.45,
  },
  {
    x: '2004-06-16',
    y: 384.65,
  },
  {
    x: '2004-07-14',
    y: 405.45,
  },
  {
    x: '2004-08-11',
    y: 395.45,
  },
  {
    x: '2004-09-08',
    y: 399.65,
  },
  {
    x: '2004-10-06',
    y: 417.88,
  },
  {
    x: '2004-11-03',
    y: 426.85,
  },
  {
    x: '2004-12-01',
    y: 454.75,
  },
  {
    x: '2004-12-29',
    y: 436.45,
  },
  {
    x: '2005-01-26',
    y: 426.8,
  },
  {
    x: '2005-02-23',
    y: 434.55,
  },
  {
    x: '2005-03-23',
    y: 425.35,
  },
  {
    x: '2005-04-20',
    y: 434.6,
  },
  {
    x: '2005-05-18',
    y: 421.75,
  },
  {
    x: '2005-06-15',
    y: 428.9,
  },
  {
    x: '2005-07-13',
    y: 424.1,
  },
  {
    x: '2005-08-10',
    y: 437.6,
  },
  {
    x: '2005-09-07',
    y: 444.7,
  },
  {
    x: '2005-10-05',
    y: 464.75,
  },
  {
    x: '2005-11-02',
    y: 463.2,
  },
  {
    x: '2005-11-30',
    y: 493.08,
  },
  {
    x: '2005-12-28',
    y: 516.6,
  },
  {
    x: '2006-01-25',
    y: 563.4,
  },
  {
    x: '2006-02-22',
    y: 555.2,
  },
  {
    x: '2006-03-22',
    y: 550.8,
  },
  {
    x: '2006-04-19',
    y: 640.2,
  },
  {
    x: '2006-05-17',
    y: 687.1,
  },
  {
    x: '2006-06-14',
    y: 559.75,
  },
  {
    x: '2006-07-12',
    y: 651.53,
  },
  {
    x: '2006-08-09',
    y: 650.03,
  },
  {
    x: '2006-09-06',
    y: 633.7,
  },
  {
    x: '2006-10-04',
    y: 567,
  },
  {
    x: '2006-11-01',
    y: 617.6,
  },
  {
    x: '2006-11-29',
    y: 636.65,
  },
  {
    x: '2006-12-27',
    y: 627.2,
  },
  {
    x: '2007-01-24',
    y: 648.8,
  },
  {
    x: '2007-02-21',
    y: 678.85,
  },
  {
    x: '2007-03-21',
    y: 664.2,
  },
  {
    x: '2007-04-18',
    y: 690.05,
  },
  {
    x: '2007-05-16',
    y: 662.15,
  },
  {
    x: '2007-06-13',
    y: 651.75,
  },
  {
    x: '2007-07-11',
    y: 660.65,
  },
  {
    x: '2007-08-08',
    y: 674.8,
  },
  {
    x: '2007-09-05',
    y: 681.8,
  },
  {
    x: '2007-10-03',
    y: 727.9,
  },
  {
    x: '2007-10-31',
    y: 796.59,
  },
  {
    x: '2007-11-28',
    y: 804.83,
  },
  {
    x: '2007-12-26',
    y: 824.5,
  },
  {
    x: '2008-01-23',
    y: 890.32,
  },
  {
    x: '2008-02-20',
    y: 944.1,
  },
  {
    x: '2008-03-19',
    y: 944.2,
  },
  {
    x: '2008-04-16',
    y: 944.59,
  },
  {
    x: '2008-05-14',
    y: 864,
  },
  {
    x: '2008-06-11',
    y: 880.35,
  },
  {
    x: '2008-07-09',
    y: 928.57,
  },
  {
    x: '2008-08-06',
    y: 879.8,
  },
  {
    x: '2008-09-03',
    y: 801.3,
  },
  {
    x: '2008-10-01',
    y: 870.8,
  },
  {
    x: '2008-10-29',
    y: 754.95,
  },
  {
    x: '2008-11-26',
    y: 812.9,
  },
  {
    x: '2008-12-24',
    y: 848,
  },
  {
    x: '2009-01-21',
    y: 854.25,
  },
  {
    x: '2009-02-18',
    y: 984.9,
  },
  {
    x: '2009-03-18',
    y: 942,
  },
  {
    x: '2009-04-15',
    y: 891.05,
  },
  {
    x: '2009-05-13',
    y: 926.3,
  },
  {
    x: '2009-06-10',
    y: 954.49,
  },
  {
    x: '2009-07-08',
    y: 909.5,
  },
  {
    x: '2009-08-05',
    y: 963.45,
  },
  {
    x: '2009-09-02',
    y: 978.5,
  },
  {
    x: '2009-09-30',
    y: 1007.7,
  },
  {
    x: '2009-10-28',
    y: 1028.1,
  },
  {
    x: '2009-11-25',
    y: 1191.8,
  },
  {
    x: '2009-12-23',
    y: 1087.55,
  },
  {
    x: '2010-01-20',
    y: 1111.05,
  },
  {
    x: '2010-02-17',
    y: 1106.81,
  },
  {
    x: '2010-03-17',
    y: 1120.35,
  },
  {
    x: '2010-04-14',
    y: 1155.35,
  },
  {
    x: '2010-05-12',
    y: 1238.93,
  },
  {
    x: '2010-06-09',
    y: 1233.5,
  },
  {
    x: '2010-07-07',
    y: 1202.75,
  },
  {
    x: '2010-08-04',
    y: 1194.95,
  },
  {
    x: '2010-09-01',
    y: 1244.3,
  },
  {
    x: '2010-09-29',
    y: 1309.85,
  },
  {
    x: '2010-10-27',
    y: 1325.35,
  },
  {
    x: '2010-11-24',
    y: 1375,
  },
  {
    x: '2010-12-22',
    y: 1385.35,
  },
  {
    x: '2011-01-19',
    y: 1369.93,
  },
  {
    x: '2011-02-16',
    y: 1374.43,
  },
  {
    x: '2011-03-16',
    y: 1398.88,
  },
  {
    x: '2011-04-13',
    y: 1457.3,
  },
  {
    x: '2011-05-11',
    y: 1501.2,
  },
  {
    x: '2011-06-08',
    y: 1537.65,
  },
  {
    x: '2011-07-06',
    y: 1528.9,
  },
  {
    x: '2011-08-03',
    y: 1661.75,
  },
  {
    x: '2011-08-31',
    y: 1825.72,
  },
  {
    x: '2011-09-28',
    y: 1608.8,
  },
  {
    x: '2011-10-26',
    y: 1724.82,
  },
  {
    x: '2011-11-23',
    y: 1692.27,
  },
  {
    x: '2011-12-21',
    y: 1615.23,
  },
  {
    x: '2012-01-18',
    y: 1659.95,
  },
  {
    x: '2012-02-15',
    y: 1728.15,
  },
  {
    x: '2012-03-14',
    y: 1644.88,
  },
  {
    x: '2012-04-11',
    y: 1659.13,
  },
  {
    x: '2012-05-09',
    y: 1589.57,
  },
  {
    x: '2012-06-06',
    y: 1619.3,
  },
  {
    x: '2012-07-04',
    y: 1615.63,
  },
  {
    x: '2012-08-01',
    y: 1599.48,
  },
  {
    x: '2012-08-29',
    y: 1656.5,
  },
  {
    x: '2012-09-26',
    y: 1752.75,
  },
  {
    x: '2012-10-24',
    y: 1701.95,
  },
  {
    x: '2012-11-21',
    y: 1728.7,
  },
  {
    x: '2012-12-19',
    y: 1667.25,
  },
  {
    x: '2013-01-16',
    y: 1679.95,
  },
  {
    x: '2013-02-13',
    y: 1642.55,
  },
  {
    x: '2013-03-13',
    y: 1587.7,
  },
  {
    x: '2013-04-10',
    y: 1558.54,
  },
  {
    x: '2013-05-08',
    y: 1474.07,
  },
  {
    x: '2013-06-05',
    y: 1403.4,
  },
  {
    x: '2013-07-03',
    y: 1252.83,
  },
  {
    x: '2013-07-31',
    y: 1325.25,
  },
  {
    x: '2013-08-28',
    y: 1417.51,
  },
  {
    x: '2013-09-25',
    y: 1334.48,
  },
  {
    x: '2013-10-23',
    y: 1333.42,
  },
  {
    x: '2013-11-20',
    y: 1244.25,
  },
  {
    x: '2013-12-18',
    y: 1218.5,
  },
  {
    x: '2014-01-15',
    y: 1241.86,
  },
  {
    x: '2014-02-12',
    y: 1291.18,
  },
  {
    x: '2014-03-12',
    y: 1366.54,
  },
  {
    x: '2014-04-09',
    y: 1312.09,
  },
  {
    x: '2014-05-07',
    y: 1289.57,
  },
  {
    x: '2014-06-04',
    y: 1245.35,
  },
  {
    x: '2014-07-02',
    y: 1327.2,
  },
  {
    x: '2014-07-30',
    y: 1295.88,
  },
  {
    x: '2014-08-27',
    y: 1282.32,
  },
  {
    x: '2014-09-24',
    y: 1216.85,
  },
  {
    x: '2014-10-22',
    y: 1242.14,
  },
  {
    x: '2014-11-19',
    y: 1182.06,
  },
  {
    x: '2014-12-17',
    y: 1189,
  },
  {
    x: '2015-01-14',
    y: 1229.68,
  },
  {
    x: '2015-02-11',
    y: 1218.85,
  },
  {
    x: '2015-03-11',
    y: 1154.78,
  },
  {
    x: '2015-04-08',
    y: 1202.65,
  },
  {
    x: '2015-05-06',
    y: 1191.29,
  },
  {
    x: '2015-06-03',
    y: 1184.95,
  },
  {
    x: '2015-07-01',
    y: 1168.6,
  },
  {
    x: '2015-07-29',
    y: 1096.55,
  },
  {
    x: '2015-08-26',
    y: 1124.75,
  },
  {
    x: '2015-09-23',
    y: 1129.95,
  },
  {
    x: '2015-10-21',
    y: 1166.65,
  },
  {
    x: '2015-11-18',
    y: 1071.07,
  },
  {
    x: '2015-12-16',
    y: 1072.71,
  },
  {
    x: '2016-01-14',
    y: 1077.81,
  },
  {
    x: '2016-02-11',
    y: 1246.68,
  },
  {
    x: '2016-03-10',
    y: 1271.2,
  },
  {
    x: '2016-04-07',
    y: 1240.35,
  },
  {
    x: '2016-05-05',
    y: 1278,
  },
  {
    x: '2016-06-02',
    y: 1210.55,
  },
  {
    x: '2016-06-30',
    y: 1321.51,
  },
  {
    x: '2016-07-28',
    y: 1335.05,
  },
  {
    x: '2016-08-25',
    y: 1321.8,
  },
  {
    x: '2016-09-23',
    y: 1337.1,
  },
  {
    x: '2016-10-21',
    y: 1265.71,
  },
  {
    x: '2016-11-18',
    y: 1207.97,
  },
  {
    x: '2016-12-16',
    y: 1134.9,
  },
  {
    x: '2017-01-13',
    y: 1197.02,
  },
  {
    x: '2017-02-13',
    y: 1225.2,
  },
  {
    x: '2017-03-13',
    y: 1203.4,
  },
  {
    x: '2017-04-10',
    y: 1254.33,
  },
  {
    x: '2017-05-08',
    y: 1225.4,
  },
  {
    x: '2017-06-06',
    y: 1293.65,
  },
  {
    x: '2017-07-04',
    y: 1223,
  },
  {
    x: '2017-08-01',
    y: 1268.65,
  },
  {
    x: '2017-08-29',
    y: 1309.05,
  },
  {
    x: '2017-09-26',
    y: 1293.35,
  },
  {
    x: '2017-10-24',
    y: 1276.05,
  },
  {
    x: '2017-11-21',
    y: 1280.03,
  },
  {
    x: '2017-12-19',
    y: 1264.28,
  },
  {
    x: '2018-01-16',
    y: 1338.2,
  },
  {
    x: '2018-02-13',
    y: 1329.159,
  },
  {
    x: '2018-03-13',
    y: 1326.2,
  },
  {
    x: '2018-04-10',
    y: 1339.4,
  },
  {
    x: '2018-05-08',
    y: 1314.4,
  },
  {
    x: '2018-06-05',
    y: 1296.3,
  },
  {
    x: '2018-07-03',
    y: 1252.8,
  },
  {
    x: '2018-07-31',
    y: 1223.7,
  },
  {
    x: '2018-08-28',
    y: 1200.8,
  },
  {
    x: '2018-09-25',
    y: 1200.9,
  },
  {
    x: '2018-10-23',
    y: 1229.9,
  },
  {
    x: '2018-11-20',
    y: 1221.3,
  },
  {
    x: '2018-12-18',
    y: 1249.195,
  },
  {
    x: '2019-01-16',
    y: 1293.4,
  },
  {
    x: '2019-02-13',
    y: 1305.975,
  },
  {
    x: '2019-03-13',
    y: 1309,
  },
  {
    x: '2019-04-10',
    y: 1307.9,
  },
  {
    x: '2019-05-08',
    y: 1280.5,
  },
  {
    x: '2019-06-05',
    y: 1329.7,
  },
  {
    x: '2019-07-03',
    y: 1418.5,
  },
  {
    x: '2019-07-31',
    y: 1413.7,
  },
  {
    x: '2019-08-28',
    y: 1539.2,
  },
  {
    x: '2019-09-25',
    y: 1503.7,
  },
  {
    x: '2019-10-23',
    y: 1492,
  },
  {
    x: '2019-11-20',
    y: 1471.5,
  },
  {
    x: '2019-12-18',
    y: 1475.2,
  },
  {
    x: '2020-01-15',
    y: 1556,
  },
  {
    x: '2020-02-12',
    y: 1565.6,
  },
  {
    x: '2020-03-11',
    y: 1634.6,
  },
  {
    x: '2020-04-08',
    y: 1644.8,
  },
  {
    x: '2020-05-07',
    y: 1715.6,
  },
  {
    x: '2020-06-05',
    y: 1681.6,
  },
  {
    x: '2020-07-03',
    y: 1774.31,
  },
  {
    x: '2020-07-31',
    y: 1974.9,
  },
  {
    x: '2020-08-28',
    y: 1964.5,
  },
  {
    x: '2020-09-25',
    y: 1860,
  },
  {
    x: '2020-10-23',
    y: 1901.174,
  },
  {
    x: '2020-11-20',
    y: 1870.598,
  },
  {
    x: '2020-12-18',
    y: 1880.895,
  },
  {
    x: '2021-01-18',
    y: 1836.99,
  },
  {
    x: '2021-02-15',
    y: 1817.46,
  },
  {
    x: '2021-03-15',
    y: 1731.5,
  },
  {
    x: '2021-04-12',
    y: 1732.4,
  },
  {
    x: '2021-05-10',
    y: 1835.63,
  },
  {
    x: '2021-06-07',
    y: 1898.9,
  },
  {
    x: '2021-07-05',
    y: 1791.66,
  },
  {
    x: '2021-08-02',
    y: 1813.31,
  },
  {
    x: '2021-08-30',
    y: 1809.21,
  },
  {
    x: '2021-09-27',
    y: 1749.728,
  },
  {
    x: '2021-10-25',
    y: 1807.4,
  },
  {
    x: '2021-11-22',
    y: 1804.282,
  },
  {
    x: '2021-12-20',
    y: 1790.6,
  },
  {
    x: '2022-01-17',
    y: 1818.53,
  },
  {
    x: '2022-02-14',
    y: 1871.04,
  },
  {
    x: '2022-03-14',
    y: 1950.3,
  },
  {
    x: '2022-04-11',
    y: 1953.54,
  },
  {
    x: '2022-05-10',
    y: 1837.992,
  },
  {
    x: '2022-06-07',
    y: 1852.08,
  },
  {
    x: '2022-07-05',
    y: 1764.2,
  },
  {
    x: '2022-08-02',
    y: 1760,
  },
  {
    x: '2022-08-30',
    y: 1723.6,
  },
  {
    x: '2022-09-27',
    y: 1628.7,
  },
  {
    x: '2022-10-25',
    y: 1652.6,
  },
  {
    x: '2022-11-22',
    y: 1739.7,
  },
  {
    x: '2022-12-20',
    y: 1816.675,
  },
  {
    x: '2023-01-18',
    y: 1903.7,
  },
  {
    x: '2023-02-15',
    y: 1835.6,
  },
  {
    x: '2023-03-15',
    y: 1917.72,
  },
  {
    x: '2023-04-12',
    y: 2014.6,
  },
  {
    x: '2023-05-10',
    y: 2029.49,
  },
  {
    x: '2023-06-07',
    y: 1939.51,
  },
  {
    x: '2023-07-05',
    y: 1914.6,
  },
  {
    x: '2023-08-02',
    y: 1934.13,
  },
  {
    x: '2023-08-30',
    y: 1942.07,
  },
  {
    x: '2023-09-27',
    y: 1874.57,
  },
  {
    x: '2023-10-25',
    y: 1979.3,
  },
  {
    x: '2023-11-22',
    y: 1989.548,
  },
  {
    x: '2023-12-20',
    y: 2031.735,
  },
  {
    x: '2024-01-17',
    y: 2005.945,
  },
  {
    x: '2024-02-14',
    y: 1992.105,
  },
  {
    x: '2024-03-13',
    y: 2174.128,
  },
  {
    x: '2024-04-11',
    y: 2372.016,
  },
  {
    x: '2024-05-09',
    y: 2346.211,
  },
  {
    x: '2024-06-06',
    y: 2375.375,
  },
  {
    x: '2024-07-04',
    y: 2356.52,
  },
  {
    x: '2024-08-01',
    y: 2446.065,
  },
  {
    x: '2024-08-29',
    y: 2520.9,
  },
  {
    x: '2024-09-27',
    y: 2657.97,
  },
];

const guideData = [
  {
    d0: [
      {
        x: '2003-03-26',
        y: 'min',
      },
      {
        x: '2005-03-23',
        y: 'max',
      },
    ],
    text: {
      x: '2003-03-26',
      y: 'max',
    },
    textContent: '伊拉克战争',
  },
  {
    d0: [
      {
        x: '2007-04-18',
        y: 'min',
      },
      {
        x: '2008-03-19',
        y: 'max',
      },
    ],
    text: {
      x: '2007-04-18',
      y: 'max',
    },
    textContent: '次贷危机',
  },
  {
    d0: [
      {
        x: '2019-12-18',
        y: 'min',
      },
      {
        x: '2020-08-28',
        y: 'max',
      },
    ],
    text: {
      x: '2019-12-18',
      y: 'max',
    },
    textContent: '新冠疫情',
  },
  {
    d0: [
      {
        x: '2024-01-17',
        y: 'min',
      },
      {
        x: '2024-09-27',
        y: 'max',
      },
    ],
    text: {
      x: '2024-01-17',
      y: 'max',
    },
    textContent: '地缘冲突\n叠加大选',
  },
];

const keyFrames = [
  {
    line: {
      to: {
        data,
      },
      duration: 1500,
    },
  },
  {
    'rect-0': { to: { visible: true }, duration: 500 },
    'text-0': { to: { visible: true }, duration: 500 },
  },
  {
    'rect-1': { to: { visible: true }, duration: 500 },
    'text-1': { to: { visible: true }, duration: 500 },
  },
  {
    'rect-2': { to: { visible: true }, duration: 500 },
    'text-2': { to: { visible: true }, duration: 500 },
  },
  {
    'rect-3': { to: { visible: true }, duration: 500 },
    'text-3': { to: { visible: true }, duration: 500 },
  },
];
let playRef = { current: null };
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Player keyFrames={keyFrames} state={'play'} ref={playRef}>
      <Chart key="line" data={[]} style={{ padding: ['50px', '80px', '10px', '10px'] }}>
        <Axis
          field="x"
          animate={false}
          tickCount={3}
          style={{
            label: { align: 'between' },
          }}
        />
        <Line x="x" y="y" color="#ca9430" />
        {guideData.map((d, i) => (
          <RectGuide
            key={`rect-${i}`}
            visible={false}
            records={d.d0}
            style={{
              fill: '#ca9430',
              fillOpacity: 0.1,
            }}
            animation={{
              appear: {
                easing: 'linear',
                property: ['width'],
                start: {
                  width: 0,
                },
              },
            }}
          ></RectGuide>
        ))}
        {guideData.map((d, i) => (
          <TextGuide
            key={`text-${i}`}
            visible={false}
            records={[d.text]}
            content={d.textContent}
            style={{
              fill: '#ca9430',
            }}
            animation={{
              appear: {
                easing: 'linear',
                property: ['opacity'],
              },
            }}
          ></TextGuide>
        ))}
      </Chart>
    </Player>
  </Canvas>
);

const canvas = new Canvas(props);
canvas.render().then(() => {
  //UI
  const gui = new lil.GUI({ autoPlace: false });
  $wrapper.appendChild(gui.domElement);
  const animationFolder = gui.addFolder('animation');
  const animationConfig = {
    play: () => {
      playRef.current.setPlayState('play');
    },
    pause: () => {
      playRef.current.setPlayState('pause');
    },
    goto: 0,
  };
  animationFolder.add(animationConfig, 'play').name('Play');
  animationFolder.add(animationConfig, 'pause').name('Pause');
  animationFolder.add(animationConfig, 'goto', 0, 3500).onChange((n) => {
    playRef.current.goTo(n);
  });
  animationFolder.open();
});
